@import 'assets/imports.styl'
// @import 'css-assets/normalize.styl'

// @import 'css-assets/general'
// @import 'css-assets/blocks'
// @import 'css-assets/layouts'
// @import 'css-assets/effects'
// @import 'css-assets/icons'

// use('assets/nesting-tree-traversal.js')

.el
  width  20*PX
  height 120*PX
  background #aaa
  position absolute
  left 0
  // transform-origin center bottom


html, body
  height 1000px

// .el
//   width 800px
//   height 800px
//   // background #111
//   background magenta
//   transform translateZ(0)

.sprite
  position  absolute
  left      100px
  top       50px
  &__frame
    position    absolute
    top         0
    left        0
    transform   translateZ(0)
    display     block
    width       100px
    height      100px
  &__ellipse
    stroke      deeppink
    fill        none
    
// .el
//   width  50px
//   height 50px
//   border-radius 50%
//   background deeppink
//   position absolute
//   top 20%
//   left 10%
//   margin-left 500px
//   nw 50%

// svg
//   hl deeppink

.svg
  position absolute
  top  50*gs
  left 0
  
.svg-path
  position absolute
  top 20*gs

html, body
  padding 0
  margin 0
  background #333
gap = 100px
originX = 1000px
originY = 40px
windowSize = 1280
.page
  background deeppink
  width 100%
  height 1888px
  position absolute
  overflow hidden
  startSize = 4px
  // z-index 0
  &__inner
    overflow hidden
    position absolute
    width startSize
    height startSize
    left originX
    top  originY
    background orange
    backface-visibility hidden
    perspective (windowSize)px
    &.is-normal
      width 100%
      height auto
      transition none
      overflow visible
      position static
      .page__inner__inner
        width 100%
        transition none
        transform none
        position static
    &.is-scaled
      transform scale(1*windowSize)
      transition transform 7s cubic-bezier(0.19, 1, 0.22, 1)
      .page__inner__inner
        transform translateZ(-(windowSize*windowSize)px)
        transition transform 7s cubic-bezier(0.19, 1, 0.22, 1)
    &__inner
      width (windowSize)px
      left - originX
      top  - originY
      position absolute
      backface-visibility hidden
      background orange
// .content
//   position absolute
//   nw 0
//   se 0
//   padding-left 4*gs
//   // min-width 1280px
//   // min-height 900px
//   background purple
//   // margin-left -640px
//   // margin-top  -450px
//   position absolute

// // chrome:
//   position absolute
//   overflow hidden
//   rect 140px

// // safari:
//   overflow hidden
//   rect 140px

// .div-wrapper
//   position absolute
//   overflow hidden
//   rect 140px
// .div
//   position absolute
// svg
//   hl hotpink
// body
//   height 600px

// iframe
//   display none !important
// canvas
//   hl orange

// .container
//   width  800px
//   height 800px
//   border 1px solid hotpink
//   position relative

// .el
//   // border 1px solid deeppink
//   background hotpink
//   border-radius 50%
//   size = 5*gs
//   rect size
//   margin-left -(size/2)
//   position absolute
//   nw 0
//   // backface-visibility hidden
//   // transform translateZ(0)


.elem {
  width: 50px;
  height: 50px;
  margin-left: 200px;
  background: deeppink;
  border-radius: 50%;
  // -webkit-mask-image: url('');
  // -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  // -webkit-filter: url(#filter-1);
  // -moz-filter: url(#filter-1);
  // filter: url(#filter-1);
}